对话框(Modal)

2024-07-03 21:31| 来源: 网络整理| 查看: 265

API#NzModalService#

对话框当前分为 2 种模式，普通模式和确认框模式（即Confirm对话框，通过调用confirm/info/success/error/warning弹出），两种模式对 API 的支持程度稍有不同。

参数说明类型默认值全局配置nzAfterOpenModal 打开后的回调EventEmitter-nzAfterCloseModal 完全关闭后的回调，可监听 close/destroy 方法传入的参数EventEmitter-nzBodyStyleModal body 样式object-nzCancelText取消按钮文字。设为 null 表示不显示取消按钮（若在普通模式下使用了 nzFooter 参数，则该值无效）string取消nzCentered垂直居中展示 ModalbooleanfalsenzClosable是否显示右上角的关闭按钮。确认框模式下该值无效（默认会被隐藏）booleantruenzOkLoading确定按钮 loadingbooleanfalsenzCancelLoading取消按钮 loadingbooleanfalsenzOkDisabled是否禁用确定按钮booleanfalsenzCancelDisabled是否禁用取消按钮booleanfalsenzDraggable模态框是否可拖动booleanfalsenzFooter底部内容。1. 仅在普通模式下有效。2. 可通过传入 ModalButtonOptions 来最大程度自定义按钮（详见案例或下方说明）。3. 当不需要底部时，可以设为 nullstringTemplateRefModalButtonOptions默认的确定取消按钮nzKeyboard是否支持键盘 esc 关闭booleantruenzMask是否展示遮罩booleantrue✅nzMaskClosable点击蒙层是否允许关闭booleantrue✅nzCloseOnNavigation当用户在历史中前进/后退时是否关闭模态框。注意，这通常不包括点击链接（除非用户使用 HashLocationStrategy）。booleantrue✅nzDirection文字方向'ltr' | 'rtl'-✅nzMaskStyle遮罩样式object-nzOkText确认按钮文字。设为 null 表示不显示确认按钮（若在普通模式下使用了 nzFooter 参数，则该值无效）string确定nzOkType确认按钮类型。与 nz-button 的 nzType 类型值一致stringprimarynzOkDanger确认按钮是否为危险按钮。与 nz-button 的 nzDanger 值保持一致booleanfalsenzStyle可用于设置浮层的样式，调整浮层位置等object-nzTitle标题。留空表示不展示标题。TemplateRef 的使用方法可参考案例stringTemplateRef-nzCloseIcon自定义关闭图标string|TemplateRef-nzVisible对话框是否可见。当以标签使用时，请务必使用双向绑定，例如：[(nzVisible)]="visible"booleanfalsenzWidth宽度。使用数字时，默认单位为 pxstringnumber520nzClassName对话框的类名string-nzWrapClassName对话框外层容器的类名string-nzZIndex设置 Modal 的 z-indexnumber1000nzOnCancel点击遮罩层或右上角叉或取消按钮的回调（若 nzContent 为 Component，则将会以该 Component 实例作为参数）。注：当以NzModalService.create创建时，此参数应传入 function（回调函数）。该函数可返回 promise，待执行完毕或 promise 结束时，将自动关闭对话框（返回 false 可阻止关闭）EventEmitter-nzOnOk点击确定回调（若 nzContent 为 Component，则将会以该 Component 实例作为参数）。注：当以NzModalService.create创建时，此参数应传入 function（回调函数）。该函数可返回 promise，待执行完毕或 promise 结束时，将自动关闭对话框（返回 false 可阻止关闭）EventEmitter-nzContent内容stringTemplateRefComponentng-content-nzIconType图标 Icon 类型。仅确认框模式下有效string'question-circle'nzAutofocus自动聚焦及聚焦位置，为 null 时禁用'ok' | 'cancel' | 'auto' | null'auto'采用服务方式创建普通模式对话框#

您可调用 NzModalService.create(options) 来动态创建普通模式对话框，这里的 options 是一个对象，支持上方 API 中给出的支持普通模式的参数

确认框模式 - NzModalService.method()#

包括：

NzModalService.infoNzModalService.successNzModalService.errorNzModalService.warningNzModalService.confirm

以上均为一个函数，参数为 object，与上方 API 一致。部分属性类型或初始值有所不同，已列在下方：

参数说明类型默认值nzOnOk点击确定按钮时将执行的回调函数（若 nzContent 为 Component，则将会以该 Component 实例作为参数）。该函数可返回 promise，待执行完毕或 promise 结束时，将自动关闭对话框（返回 false 可阻止关闭）function-nzOnCancel点击遮罩层或右上角叉或取消按钮的回调（若 nzContent 为 Component，则将会以该 Component 实例作为参数）。该函数可返回 promise，待执行完毕或 promise 结束时，将自动关闭对话框（返回 false 可阻止关闭）function-nzWidth宽度stringnumber416nzMaskClosable点击蒙层是否允许关闭booleanfalse

以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。

constructor(modal: NzModalService) { const ref: NzModalRef = modal.info(); ref.close(); // 或 ref.destroy(); 将直接销毁对话框 }相关类型定义#NzModalService 的其他方法/属性#方法/属性说明类型openModals当前打开的所有 Modal 引用列表NzModalRef[]afterAllClose所有 Modal 完全关闭后的回调ObservablecloseAll()关闭所有模态框functionNzModalRef#

NzModalRef 对象用于控制对话框以及进行内容间的通信

通过服务方式 NzModalService.xxx() 创建的对话框，都会返回一个 NzModalRef 对象，用于操控该对话框（若使用 nzContent 为 Component 时，也可通过依赖注入 NzModalRef 方式获得此对象），该对象具有以下方法：

方法/属性说明afterOpen同 nzAfterOpen，但类型为 ObservableafterClose同 nzAfterClose，但类型为 Observableclose(result: any)关闭(隐藏)对话框。注：当用于以服务方式创建的对话框，此方法将直接销毁对话框（同 destroy 方法）destroy(result: any)销毁对话框。注：仅用于服务方式创建的对话框（非服务方式创建的对话框，此方法只会隐藏对话框）getContentComponent()获取对话框内容中nzContent的 Component 实例 instance。注：当对话框还未初始化完毕（ngOnInit未执行）时，此函数将返回undefinedgetContentComponentRef()获取对话框内容中nzContent的 Component 引用 ComponentRef。注：当对话框还未初始化完毕（ngOnInit未执行）时，此函数将返回nulltriggerOk()手动触发 nzOnOktriggerCancel()手动触发 nzOnCancelupdateConfig(config: ModalOptions): void更新配置ModalButtonOptions（用于自定义底部按钮）#

可将此类型数组传入 nzFooter，用于自定义底部按钮。

按钮配置项如下（与 button 组件保持一致）：

nzFooter: [{ label: string; // 按钮文本 type?: string; // 类型 danger?: boolean; // 是否danger shape?: string; // 形状 ghost?: boolean; // 是否ghost size?: string; // 大小 autoLoading?: boolean; // 默认为true，若为true时，当onClick返回promise时此按钮将自动置为loading状态 // 提示：下方方法的this指向该配置对象自身。当nzContent为组件类时，下方方法传入的contentComponentInstance参数为该组件类的实例 // 是否显示该按钮 show?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean); // 是否显示为loading loading?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean); // 是否禁用 disabled?: boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean); // 按钮点击回调 onClick?(this: ModalButtonOptions, contentComponentInstance?: object): void | Promise | any; }]

以上配置项也可在运行态实时改变，来触发按钮行为改变。

[nzModalTitle]#

自定义标题。

Custom Modal Title Custom Modal Title [nzModalContent]#

自定义内容。

Custom Modal Content Custom Modal Content [nzModalFooter]#

自定义页脚。

Custom Callback Custom Submit Custom Callback Custom Submit

【本文地址】

公司简介

联系我们